<template>
  <div class="Dash">
    <el-row>
      <el-col :span="5">
        <el-card style="height:300px">
          <el-button @click="dialogVisible = true">新建公告</el-button>
        </el-card>
      </el-col>
      <el-col :span="18" style="display: flex;justify-content: center">
        <el-button type="primary" @click="monitor">进入监控大屏</el-button>
      </el-col>
    </el-row>
    <el-dialog
        title="新建公告"
        :visible.sync="dialogVisible"
        width="60%"
        :before-close="handleClose">
      <el-row style="margin-bottom: 20px">
        <el-col :span="2"><h1>标题：</h1></el-col>
        <el-col :span="20">
          <el-input v-model="input"></el-input>
        </el-col>
      </el-row>
      <div id="editor-main">
        <le-editor ref="html-preview" :toolbar="toolbar" v-model="value" :hljs-css="hljsCss" @save="save"></le-editor>
      </div>
      <span slot="footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="pushMessage">发 布</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Dash",
  mounted() {
  },
  data() {
    return {
      input: '',
      hljsCss: 'agate',
      dialogVisible: false,
      toolbar: {
        undo: true, // 撤销
        redo: true, // 重做
        bold: true, // 粗体
        del: true, // 删除线
        underline: true, // 下划线
        italic: true, // 斜体
        quote: true, // 引用
        bookmark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        h1: true, // 标题1
        h2: true, // 标题2
        h3: true, // 标题3
        h4: true, // 标题4
        h5: true, // 标题5
        h6: true, // 标题6
        alignLeft: true, // 居左
        alignCenter: true, // 居中
        alignRight: true, // 居右
        ol: true, // 有序列表
        ul: true, // 无序列表
        hr: true, // 分隔线
        link: true, // 链接
        inlineCode: true, // 行内代码
        code: true, // 代码块
        image: true, // 图片
        table: true, // 表格
        skin: true, // 皮肤
        fullScreenEdit: true, // 全屏编辑
        fullScreen: true, // 全窗口预览
        preview: true,  // 实时预览
        save: true,
      },
      value: '',
    };
  },
  methods: {
    monitor() {
      this.$router.push('/monitor')
    },
    handleClose() {
      this.dialogVisible = false
    },
    pushMessage() {
      this.$axios2.post('/uploadMessage', {
        'title': this.input,
        'context': this.value,
      }).then((res) => {
        let code = res.data.msg
        if (code === 200) {
          this.dialogVisible = false
          this.$message.success("公告创建成功")
        }
      })
    },
    save(val) {
      console.log(val)
    }
  }
}
</script>

<style scoped>
#editor-main {
  color: #2c3e50;
  width: 100%;
  height: 400px;
}
</style>